<template>
	<!-- <view class="">正在加载中.....</view> -->
	<view class="rank">
		<!-- #ifdef MP -->
		<view :style="{ height: mpbarheight + 'px' }"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" style="background-color: rgb(84,82,211)"><view class="top_view" style="background-color: rgb(84,82,211)"></view></view>
		<!-- #endif -->
		<view class="top_bg">
			<image src="/static/image/rank_bg.png" mode="" style="width: 100%;height: 100%;"></image>
			<view class="userinfo" style="padding-top: 86rpx;">
				<u-avatar :src="rankone.img" :size="180" ></u-avatar>
				<view class="">
					<view class="u-font-18" style="color: #FFFFFF;">{{ rankone.user }}</view>
					<view class="u-font-14" style="color: #FAD111;">
						￥
						<text style="font-size: 40rpx;">{{ rankone.zr_preServiceFee }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="rank_ul">
			<view class="top_header">小组排行</view>
			<u-gap height="8" bg-color="#F7F7F7"></u-gap>
			<view class="rank_li" v-for="(item, index) in rankList" :key="index">
				<view class="rankbox">
					<view class="li_left">
						<image
							v-if="index < 3"
							:src="index == 0 ? '../../static/image/top_one.png' : index == 1 ? '../../static/image/top_two.png' : '../../static/image/top_three.png'"
							style="width: 56rpx;height: 56rpx;"
						></image>
						<view v-else style="width: 56rpx;height: 56rpx;line-height: 56rpx; color: rgba(16, 16, 16, 1);font-size: 28rpx;text-align: center;">{{ index + 1 }}</view>
						<u-avatar :src="item.img" :size="112" style="margin-left: 34rpx;"></u-avatar>
						<view class="userinfo">
							<text class="username">{{ item.user }}</text>
							<text class="timer">{{ item.useTime }}</text>
						</view>
					</view>
					<view class="li_right">
						<view class="price">
							￥
							<text class="num">{{ item.input_preServiceFee }}</text>
						</view>
						<view class="level">{{ item.level_name }}</view>
					</view>
				</view>
			</view>
		</view>

		<u-back-top :scroll-top="scrollTop" top="600" :z-index="99999999999"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'haha',
	data() {
		return {
			mpbarheight: this.statusBarHeight,
			scrollTop: 300,
			rankone: {
				// bz_preServiceFee: "0.00"
				// img: "http://img.haodanku.com/headimg_15775_1591955585.jpg"
				// level_name: "宗师"
				// month_preServiceFee: "43031.59"
				// qr_preServiceFee: "4118.33"
				// rank: 1
				// useTime: "2018-03-26"
				// user: "晋彤"
				// zr_preServiceFee: "4272.66"
			},
			rankList: [
				// {
				// 	id: 2513,
				// 	img: 'img.letuilm.com/2020/09/83d9e02020091409131657259.jpg', //头像
				// 	user: '付全恩', //用户名
				// 	useTime: '2020-09-08', //入职时间
				// 	input_preServiceFee: '0.00', //传进日期预估服务费
				// 	preServiceFee: '0.00', //，传进日期-1天预估服务费
				// 	week_preServiceFee: '0.00', //传进日期当周总预估服务费
				// 	month_preServiceFee: '0.00', //传进日期当月总预估服务费
				// 	top_month_preServiceFee: '0.00', //传进日期上月总预估服务费
				// 	week_cmServiceFee: '0.00', //传进日期当周总结算服务费
				// 	month_cmServiceFee: '0.00', //传进当月总结算服务费
				// 	top_month_cmServiceFee: '0.00', //传进日期上月总结算服务费
				// 	input_rank: 1 //传进日期排名
				// }
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		// #ifdef APP-PLUS || H5
		var loginRes = this.checkLogin('/pages/index/index', '2');
		if (!loginRes) {
			return false;
		}
		// #endif

		// let pages = getCurrentPages();
		// console.log(pages);
		// console.log(pages[pages.length - 1]); //拿到上一页
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onBackPress(e) {},
	//初次渲染完成
	onReady() {
		this.getservicerank();
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {
		// if (uni.getStorageSync('isrank')) {
		// 	uni.removeStorageSync('isrank');
		// 	let routeurl = uni.getStorageSync('routeurl');
		// 	// console.log(routeurl);
		// 	switch (routeurl) {
		// 		case 'index':
		// 			uni.switchTab({
		// 				url: '/pages/index/index'
		// 			});
		// 			break;
		// 		case 'attrinvestment':
		// 			uni.switchTab({
		// 				url: '/pages/attrinvestment/attrinvestment'
		// 			});
		// 			break;
		// 		case 'my':
		// 			uni.switchTab({
		// 				url: '/pages/my/my'
		// 			});
		// 			break;
		// 		case 'taocircle':
		// 			uni.switchTab({
		// 				url: '/pages/taocircle/taocircle'
		// 			});
		// 			break;
		// 	}
		// } else {
		// 	uni.navigateTo({
		// 		url: '/pages/rank/rank',
		// 		animationType: 'pop-in',
		// 		animationDuration: 300
		// 	});
		// }
	},
	//前台进入后台
	onHide() {
		// console.log('离开页面');
	},
	methods: {
		getservicerank() {
			this.$u.api
				.getservicerank({
					time: this.$u.timeFormat(new Date().getTime() - 3600 * 24 * 1000, 'yyyy-mm-dd')
				})
				.then(res => {
					console.log(res);
					if (res.code == 200) {
						// this.rankList = res.data.group;
						this.topthree = [];
						this.rankList = [];
						// this.myrank = res.data.my_info;
						this.rankone=res.data.rank_one
						try {
							let length = res.data.group.length;
							if (length == 0) throw '暂无数据';
							for (let i in res.data.group) {
									this.rankList.push(res.data.group[i]);
							}
						} catch (e) {
							this.$refs.uToast.show({
								title: e,
								type: 'info'
							});
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.rank {
	.top_bg {
		width: 100%;
		height: 398rpx;
		position: relative;
		.userinfo {
			position: absolute;
			top: 0;
			right: 60rpx;
			text-align: center;
		}
	}
	.rank_ul {
		margin: 0 auto;
		margin-left: -2rpx;
		// background-color: #ef5e41;
		box-sizing: inherit;
		position: relative;
		.rank_li {
			// border-top-width: 2rpx;
			border-bottom-width: 2rpx;
			border-bottom-color: #f0f0f0;
			border-bottom-style: solid;
			background-color: #ffffff;
			padding: 20rpx 0;
			.rankbox {
				padding: 0 28rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.li_left {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.userinfo {
						// width: 134rpx;
						display: flex;
						flex-wrap: wrap;
						margin-left: 18rpx;
						text-align: left;
						.username {
							display: block;
							width: 100%;
							font-size: 32rpx;
						}
						.timer {
							font-size: 24rpx;
							padding-top: 12rpx;
						}
					}
				}
				.li_right {
					text-align: right;
					.price {
						.num {
							color: rgba(16, 16, 16, 1);
							font-size: 28rpx;
						}
					}
					.level {
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
						padding-top: 12rpx;
					}
				}
			}
		}
		.top_header {
			height: 70rpx;
			line-height: 70rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 0 0;
			margin-top: -16rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #101010;
			padding-left: 28rpx;
		}
	}
}
</style>
